<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 70%; width: 70% }
    </style>
	<script type="text/javascript" src="js/jquery.min.js">
	</script>
	<script type="text/javascript">
	
	(function($) {
		$.fn.menu = function(options) {
		
			this.click(function(event) {
				$('div#contextMenu').remove('*');
				$('<div id="contextMenu"><p>Some random text to be displayed</p><p>Some more text to be shown</p></div>').css({
					position: 'absolute',
					top: event.pageY - 0,
					left: event.pageX - 0,
					display: 'none',
					border: 'solid 3px',
					width: '400px',
 					height: '60px',
					overflow: 'auto',
				}).fadeIn('slow').css({
					'z-index':'10',
					'background-color': 'white',
					}).click(function(event) {
						$(this).fadeOut('slow');
				}).appendTo('body');;
			});
			
			return this;
		}
	})(jQuery);
	
	$(function(){
		$('span').menu().css('font-weight', 'bold');
	});
	</script>
  </head>
  <body>
	<p>Some text to be tested</p>
	<p>another paragraph</p>
	<p>Some <span>random</span> text to be displayed</p>
	<p><img src="images/castle.jpg" id="obrazek" /><p>
	<p>another paragraph</p>
	<p>last paragraph</p>
	<p>I hope that this <span>example</span> will work</p>
	
	<input id="shipAddress" type="text" />
  </body>
</html>
